<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>AudioPlayer</title>
	<script src="static/artDialog/lib/jquery-1.10.2.js" type="text/javascript"></script>
	<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="static/bootstrapQ/qiao.css" rel="stylesheet">
	<script src="static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="static/bootstrapQ/qiao.js" type="text/javascript"></script>

    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/base64.js"></script>
    <script type="text/javascript" src="js/DocSys.js"></script>
    
    <link href="static/jPlayer/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="static/jPlayer/dist/jplayer/jquery.jplayer.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
	    	var docInfo = getDocInfoFromRequestParamStr();
			document.title = docInfo.name;
	
			docInfo.fileSuffix = getFileSuffix(docInfo.name);
		    getDocFileLink(docInfo, showAudio, showErrorMessage);    	
		    
		    function showAudio(fileLink)
		   	{
				$("#jquery_jplayer_1").jPlayer({
					ready: function () {
						$(this).jPlayer("setMedia", {
							title: "Bubble",
							mp3: fileLink
						});
					},
					swfPath: "static/jPlayer/dist/jplayer",
					supplied: "mp3",
					wmode: "window",
					useStateClassSkin: true,
					autoBlur: false,
					smoothPlayBar: true,
					keyEnabled: true,
					remainingDuration: true,
					toggleDuration: true
				});
		   	}
		});
    </script>
</head>
<body style="height: 100%; margin: 0;">
	<div id="jquery_jplayer_1" class="jp-jplayer"></div>
	<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
		<div class="jp-type-single">
			<div class="jp-gui jp-interface">
				<div class="jp-controls">
					<button class="jp-play" role="button" tabindex="0">play</button>
					<button class="jp-stop" role="button" tabindex="0">stop</button>
				</div>
				<div class="jp-progress">
					<div class="jp-seek-bar">
						<div class="jp-play-bar"></div>
					</div>
				</div>
				<div class="jp-volume-controls">
					<button class="jp-mute" role="button" tabindex="0">mute</button>
					<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
					<div class="jp-volume-bar">
						<div class="jp-volume-bar-value"></div>
					</div>
				</div>
				<div class="jp-time-holder">
					<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
					<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
					<div class="jp-toggles">
						<button class="jp-repeat" role="button" tabindex="0">repeat</button>
					</div>
				</div>
			</div>
			<div class="jp-details">
				<div class="jp-title" aria-label="title">&nbsp;</div>
			</div>
			<div class="jp-no-solution">
				<span>Update Required</span>
				To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
			</div>
		</div>
	</div>
</body>
</html>